<template>
  <div class="login-banner">
    <div class="banner-content">
      <!-- 主要内容区域 -->
      <div class="content-section">
        <div class="text-content">
          <h2 :key="currentSlogan.title" class="main-title">
            {{ currentSlogan.title }}
          </h2>
          <p :key="currentSlogan.subtitle" class="sub-title">
            {{ currentSlogan.subtitle }}
          </p>
          <div class="feature-list">
            <div
              v-for="(feature, index) in features"
              :key="index"
              class="feature-item"
            >
              <div class="feature-icon">
                <component :is="feature.icon" />
              </div>
              <span class="feature-text">{{ feature.text }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 装饰图片区域 -->
      <div class="decoration-section">
        <div class="decoration-container">
          <div class="decoration-bg">
            <div class="floating-element floating-1"></div>
            <div class="floating-element floating-2"></div>
            <div class="floating-element floating-3"></div>
          </div>
          <div class="main-illustration">
            <div class="dashboard-mockup">
              <div class="mockup-header">
                <div class="dot dot-1"></div>
                <div class="dot dot-2"></div>
                <div class="dot dot-3"></div>
              </div>
              <div class="mockup-content">
                <div class="chart-area">
                  <div class="chart-bar" style="height: 60%"></div>
                  <div class="chart-bar" style="height: 80%"></div>
                  <div class="chart-bar" style="height: 45%"></div>
                  <div class="chart-bar" style="height: 70%"></div>
                  <div class="chart-bar" style="height: 90%"></div>
                </div>
                <div class="info-cards">
                  <div class="info-card">
                    <div class="card-value">1,234</div>
                    <div class="card-label">文章</div>
                  </div>
                  <div class="info-card">
                    <div class="card-value">5,678</div>
                    <div class="card-label">访问</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 进度指示器 -->
      <div class="slider-indicators">
        <div
          v-for="(_, index) in slogans"
          :key="index"
          class="indicator"
          :class="{ active: currentIndex === index }"
          @click="switchToSlogan(index)"
        ></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  import {
    IconDashboard,
    IconSafe,
    IconThunderbolt,
  } from '@arco-design/web-vue/es/icon';

  const slogans = [
    {
      title: '现代化博客管理',
      subtitle: '专业的内容管理平台，让创作更高效',
    },
    {
      title: '数据驱动决策',
      subtitle: '实时分析访问数据，优化内容策略',
    },
    {
      title: '安全稳定可靠',
      subtitle: '企业级安全保障，数据永不丢失',
    },
  ];

  const features = [
    { icon: IconDashboard, text: '直观的数据面板' },
    { icon: IconThunderbolt, text: '高性能响应' },
    { icon: IconSafe, text: '安全防护' },
  ];

  const currentSlogan = ref(slogans[0]);
  const currentIndex = ref(0);
  let timer: number;

  const switchSlogan = () => {
    currentIndex.value = (currentIndex.value + 1) % slogans.length;
    currentSlogan.value = slogans[currentIndex.value];
  };

  const switchToSlogan = (index: number) => {
    currentIndex.value = index;
    currentSlogan.value = slogans[index];
    // 重置定时器
    clearInterval(timer);
    timer = window.setInterval(switchSlogan, 4000);
  };

  onMounted(() => {
    timer = window.setInterval(switchSlogan, 4000);
  });

  onUnmounted(() => {
    clearInterval(timer);
  });
</script>

<style lang="less" scoped>
  .login-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
    overflow: hidden;

    .banner-content {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: rgba(255, 255, 255, 0.95);
      z-index: 2;
    }

    .content-section {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: 420px;
      padding: 40px 20px 20px;

      .text-content {
        .main-title {
          font-size: 36px;
          font-weight: 700;
          margin: 0 0 16px;
          line-height: 1.2;
          animation: slideInUp 0.8s ease-out;
          text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .sub-title {
          font-size: 18px;
          margin: 0 0 32px;
          opacity: 0.9;
          line-height: 1.5;
          animation: slideInUp 0.8s ease-out 0.2s both;
        }

        .feature-list {
          display: flex;
          flex-direction: column;
          gap: 16px;
          animation: slideInUp 0.8s ease-out 0.4s both;

          .feature-item {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 12px;
            padding: 12px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;

            &:hover {
              background: rgba(255, 255, 255, 0.15);
              transform: translateX(8px);
            }

            .feature-icon {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 32px;
              height: 32px;
              background: rgba(255, 255, 255, 0.2);
              border-radius: 8px;
              font-size: 16px;
            }

            .feature-text {
              font-size: 16px;
              font-weight: 500;
            }
          }
        }
      }
    }

    .decoration-section {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;

      .decoration-container {
        position: relative;
        width: 300px;
        height: 240px;

        .decoration-bg {
          position: absolute;
          width: 100%;
          height: 100%;

          .floating-element {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            animation: float 6s ease-in-out infinite;

            &.floating-1 {
              width: 60px;
              height: 60px;
              top: 10%;
              left: 20%;
              animation-delay: 0s;
            }

            &.floating-2 {
              width: 40px;
              height: 40px;
              top: 70%;
              right: 30%;
              animation-delay: -2s;
            }

            &.floating-3 {
              width: 80px;
              height: 80px;
              bottom: 20%;
              left: 10%;
              animation-delay: -4s;
            }
          }
        }

        .main-illustration {
          position: relative;
          z-index: 2;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          .dashboard-mockup {
            width: 260px;
            height: 180px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
            animation: fadeInScale 1s ease-out 0.6s both;

            .mockup-header {
              display: flex;
              align-items: center;
              padding: 12px 16px;
              background: rgba(0, 0, 0, 0.05);
              gap: 8px;

              .dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;

                &.dot-1 {
                  background: #ff5f57;
                }

                &.dot-2 {
                  background: #ffbd2e;
                }

                &.dot-3 {
                  background: #28ca42;
                }
              }
            }

            .mockup-content {
              padding: 16px;
              height: calc(100% - 44px);
              display: flex;
              flex-direction: column;
              gap: 16px;

              .chart-area {
                display: flex;
                align-items: end;
                justify-content: space-between;
                height: 60px;
                gap: 6px;

                .chart-bar {
                  flex: 1;
                  background: linear-gradient(to top, #667eea, #764ba2);
                  border-radius: 2px;
                  animation: growUp 1.2s ease-out;
                }
              }

              .info-cards {
                display: flex;
                gap: 12px;

                .info-card {
                  flex: 1;
                  text-align: center;
                  padding: 8px;
                  background: rgba(102, 126, 234, 0.1);
                  border-radius: 8px;

                  .card-value {
                    font-size: 16px;
                    font-weight: 700;
                    color: #667eea;
                    margin-bottom: 2px;
                  }

                  .card-label {
                    font-size: 12px;
                    color: rgba(0, 0, 0, 0.6);
                  }
                }
              }
            }
          }
        }
      }
    }

    .slider-indicators {
      display: flex;
      gap: 8px;
      padding: 20px;

      .indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          background: rgba(255, 255, 255, 0.6);
        }

        &.active {
          background: rgba(255, 255, 255, 0.9);
          transform: scale(1.2);
        }
      }
    }
  }

  @keyframes slideInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeInScale {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes float {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
  }

  @keyframes growUp {
    from {
      height: 0;
    }
    to {
      height: inherit;
    }
  }

  // 响应式设计
  @media (max-width: 1200px) {
    .login-banner {
      .content-section {
        .text-content {
          .main-title {
            font-size: 28px;
          }

          .sub-title {
            font-size: 16px;
          }
        }
      }

      .decoration-section .decoration-container {
        width: 240px;
        height: 180px;

        .main-illustration .dashboard-mockup {
          width: 200px;
          height: 140px;
        }
      }
    }
  }

  @media (max-width: 768px) {
    .login-banner {
      .banner-content {
        padding: 20px;
      }

      .content-section {
        padding: 20px;
      }

      .decoration-section {
        display: none;
      }
    }
  }
</style>
